<template>
  <div id="footer">
    <div>
      <div class="h1">
        <h1>COnTACT</h1>
      </div>
      <p class="text">
        {{siteInfo.site_description}}
      </p>
      <p>
        <span class="text">版权所有 京ICP备{{siteInfo.site_icp}}号-1</span>
        <br />
        <span class="text">Copyright 2010 www.4miao.net all rights reserved|站长统计</span>
      </p>
    </div>
    <div>
      <div class="h1"></div>
      <div>
        <p class="text">ADD：{{siteInfo.site_address}}</p>
        <p class="text">TEL：{{siteInfo.site_tel}}</p>
        <p class="text">E-mail：YUDY@liwentao.net</p>
        <p class="text">客服QQ：{{siteInfo.site_qq}}</p>
      </div>
    </div>
    <div>
      <div class="h1">
      </div>
      <div>
        <p class="text text-phone">400-999-6666</p>
        <p class="text text-phone">010-64929332</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getSetting } from '@/network/api.js'

export default {
  name: 'Index',
  data(){
    return {
      siteInfo: {}
    }
  },
  created(){
    this.getWebsiteSetting()
  },
  methods: {
    async getWebsiteSetting(){
      let res = await getSetting()
      this.siteInfo = res.data[0]
    }
  }
};
</script>

<style scoped lang="less">
#footer {
  padding: 90px 0;
  background: #1f323f;
  display: flex;
  & > div {
    flex: 1;
    padding: 0 60px;
    p {
      margin: 15px 0;
    }
    .h1 {
      height: 102px;
    }
    h1 {
      font-size: 60px;
      color: #27bec9;
      font-weight: bold;
      font-family: Arial;
      text-transform: uppercase; /*定义只有大写*/
      text-indent: -2px;
    }
    .text {
      font-size: 14px;
      color: #fff;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
        sans-serif;
    }
    .text-phone{
      font-size: 38px;
    }
  }
}
</style>
